<template>
	<view class="pollution-abatement">
		<titleName :name="name"></titleName>
		<view class="title-bgc"></view>
		<view class="content-wrap">
			<view class="search-wrap">
				<view class="ipt-wrap">
					<input type="text" v-model="params.enterprisename" placeholder="搜索感兴趣的内容"
						placeholder-class="ipt-style" />
					<!-- <image src="../../static/search.png" mode=""></image> -->
					<button @click="getList">搜索</button>
				</view>
				<view class="explain">
					说明：录入危废代码可查询具有该污染治理能力的经营单位
				</view>

			</view>
		</view>
		<view class="list">
			<view class="item" @click="jumpPollutionabatement(item)" v-for="item,index in dataList" :key="item.id">
				<view class="left">
					<view class="order">
						<view class="square">

						</view><text>序号{{index+1}}</text>
					</view>
					<view class="name">{{item.enterprisename}}</view>
					<view class="phone">联系电话：{{item.mobile}}</view>

				</view>
				<view class="right">
					详情<image style="width: 10rpx ;height: 18rpx;margin-left: 15rpx;"
						src="https://splendid.oss-cn-beijing.aliyuncs.com/static/imghazardouswaste/right-arrow.png"
						mode=""></image>
				</view>
			</view>

			<noData v-if='dataList.length==0' />
		</view>


	</view>
</template>

<script setup>
	import titleName from '../../components/titleName.vue'
	import http from '../../request/index.js'
	import noData from '../../components/noDataShow.vue'
	import {
		ref,
		reactive
	} from 'vue'
	let name = "污染治理"
	let params = reactive({})
	let seltop = ref(1)
	let dataList = ref([])
	let jumpPollutionabatement = (item) => {
		uni.navigateTo({
			url: `/homePageOther/pollutionabatementdetail/pollutionabatementdetail?item=${JSON.stringify(item)}`
		})
	}
	let getList = () => {
		http({
			url: '/enterpriseThird/datalist',
			data: {
				enterprisetype: '1',
				...params
			}
		}).then((res) => {

			if (res.code == 0) {
				dataList.value = res.data.list
			}

		})
	}
	getList()
</script>

<style lang="scss" scoped>
	:deep(.ipt-style) {

		font-weight: 400;
		font-size: 25rpx;
		color: #ABABBB;

	}

	.pollution-abatement {
		width: 100vw;
		height: 100vh;
		padding-top: 160rpx;
		overflow: hidden;

		.title-bgc {
			background: #0874FA;
			height: 160rpx;
			width: 100vw;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9;
		}

		.content-wrap {
			background-color: #F3F5F7;


		}

		.list {
			background-color: #F3F5F7;
			height: calc(100vh - 320rpx);
			padding: 23rpx 30rpx 22rpx 30rpx;
			overflow: scroll;

			.item:first-child {
				margin-top: 0 !important;
			}

			.item {
				display: flex;
				justify-content: space-between;
				height: 168rpx;
				width: 100%;
				padding: 25rpx 40rpx 25rpx 28rpx;
				justify-content: space-between;
				align-items: center;
				background-color: #fff;
				margin-top: 22rpx;
				border-radius: 14rpx;

				.left {
					display: flex;
					flex-direction: column;
					width: 500rpx !important;
					justify-content: space-between;
					height: 100%;

					.order {

						display: flex;
						align-items: center;

						.square {
							width: 13rpx;
							height: 16rpx;
							background: #0874FA;
							border-radius: 3rpx;
							margin-right: 5rpx;
						}

						text {

							font-weight: 400;
							font-size: 21rpx;
							color: #0874FA;

						}
					}

					.name {

						font-weight: 500;
						font-size: 31rpx;
						color: #000000;

					}

					.phone {

						font-weight: 400;
						font-size: 22rpx;
						color: #333333;

					}

				}

				.right {

					font-weight: 400;
					font-size: 26rpx;
					color: #999999;


					image {}
				}
			}
		}




		.search-wrap {
			width: 100vw;
			padding: 25rpx 30rpx 23rpx 30rpx;
			background-color: #fff;

			.explain {

				font-weight: 400;
				font-size: 21rpx;
				color: #FF0000;
				margin-left: 34rpx;
				margin-top: 15rpx;
			}

			.select {
				padding-left: 4rpx;
				margin-top: 31rpx;
				display: flex;
				font-weight: 400;
				font-size: 28rpx;
				color: #8F8FA1;


				.news {}

				.politics {
					margin-left: 101rpx;
				}

				.active {

					font-weight: bold;
					font-size: 28rpx;
					color: #070707;
					position: relative;
				}

				.active::after {
					content: '';
					width: 48rpx;
					height: 8rpx;
					background: #0874FA;
					border-radius: 4rpx;
					position: absolute;
					left: 50%;
					transform: translate(-50%);
					bottom: -12rpx;
				}


			}

			.ipt-wrap {
				display: flex;
				padding-left: 34rpx;

				justify-content: space-between;
				width: 100%;
				align-items: center;
				height: 75rpx;
				background: #F7F7FE;
				border-radius: 38rpx;

				input {
					height: 100%;
					width: 100%;
				}

				button {
					flex-shrink: 0;
					width: 112rpx;
					height: 74rpx;
					background: #0874FA;
					border-radius: 14rpx;

					font-weight: 500;
					font-size: 31rpx;
					color: #FFFFFF;

				}
			}

			image {
				width: 31rpx;
				height: 31rpx;
			}
		}



	}
</style>